<template>
	<div class="message-rd">
		<common-header title="分红日历" isFixed=true></common-header>
		<div class="nu-contain">
			<div class="empty dn">
				<img class="empty-img" src="~__assets/images/empty-address.png" alt="">
				<p>无已投项目</p>
			</div>
			<div class="calender-contain">
				<inline-calendar
				  ref="calendar"
				  class="inline-calendar-demo"
				  v-model="calData"
				  start-date="2019-01-01"
				  end-date="2050-01-01">

					<div slot="each-day" slot-scope="item">
						<span class="vux-calendar-each-date">{{item.child.day}}</span>
				      <div style="font-size:12px;text-align:center;" v-if="item.child.day == 8 || item.child.day == 14"><span style="display:inline-block;width:5px;height:5px;background-color:red;border-radius:50%;"></span></div>
				      <div style="height:19px;" v-else></div>
				    </div>

				</inline-calendar>
			  	<ul class="ca-detail mt10">
			  		<li class="ca-item">
			  			<div class="ca-item__header">
			  				<p class="title fl">项目-001</p>
			  				<span class="status fr">已分红</span>
			  			</div>
			  			
			  		</li>
			  	</ul>	
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.message-rd{padding-top: 44px;}
	.nu-contain{padding: 0 a(30px) 40px;}
	.empty{
		text-align: center;
		p{
			margin-top: 30px;
			font-size: 20px;
			color:#666;
		}
	}
	.empty-img{
		display: block;
		margin: a(300px) auto 0;
		width: a(334px);
	}
	

.inline-calendar td.current span.vux-calendar-each-date {
    background-color: #FF9900;
    color: #fff!important;
}

.inline-calendar td span.vux-calendar-each-date {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 25px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid transparent;
    box-sizing: border-box;
}



</style>

<script>
	import commonHeader from "__cp/commonHeader";
	import { InlineCalendar } from 'vux';

	export default{
		name:"my-calender",
		components:{commonHeader,InlineCalendar},
		data(){
			return{
				calData:''
			}
		},
		methods:{
			setD(){
				// this.buildSlotFn = val ? (line, index, data) => {
			 //    return /8/.test(data.date) ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:red;border-radius:50%;"></span></div>' : '<div style="height:19px;"></div>'
			 //    } : () => ''
			}
		}
	}

</script>